<!DOCTYPE html>
<!--
  Copyright 2011 Google Inc.

  Licensed under the Apache License, Version 2.0 (the "License");
  you may not use this file except in compliance with the License.
  You may obtain a copy of the License at

     http://www.apache.org/licenses/LICENSE-2.0

  Unless required by applicable law or agreed to in writing, software
  distributed under the License is distributed on an "AS IS" BASIS,
  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  See the License for the specific language governing permissions and
  limitations under the License.

  Original slides: Marcin Wichary (mwichary@google.com)
  Modifications: Chrome DevRel Team (chrome-devrel@googlegroups.com)
                 Alex Russell (slightlyoff@chromium.org)
                 Brad Neuberg
-->
<html manifest="cache.appcache">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=Edge;chrome=1" />
    <title>HTML5 Presentation</title>
    <link href="http://fonts.googleapis.com/css?family=Droid+Sans|Droid+Sans+Mono" rel="stylesheet" type="text/css" />
    <link id="prettify-link" href="resources/css/prettify.css" rel="stylesheet" disabled />
    <link href="resources/css/moon.css" class="theme" rel="stylesheet" />

    <link href="resources/css/default.css" class="theme" rel="stylesheet" media="screen"  />
    <link href="resources/css/common.css" rel="stylesheet" media="screen" />
  </head>
  <body>
    <nav id="helpers">
      <button title="Previous slide" id="nav-prev" class="nav-prev">⇽</button> 
      <button title="Jump to a random slide" id="slide-no">5</button> 
      <button title="Next slide" id="nav-next" class="nav-next">⇾</button>

      <menu>
        <button type="checkbox" data-command="toc" title="Table of Contents" class="toc">TOC</button>
        <!-- <button type="checkbox" data-command="resources" title="View Related Resources">☆</button> -->
        <button type="checkbox" data-command="notes" title="View Slide Notes">✏</button>
        <button type="checkbox" data-command="source" title="View slide source">↻</button>
        <button type="checkbox" data-command="help" title="View Help">?</button>
      </menu>

    </nav>
    <div class="presentation">
      <div id="presentation-counter">Loading...</div>
      <div class="slides">
        <div class="slide" id="landing-slide">
          <style>
            #landing-slide p {
              font-size: 35px;
            }
            p#disclaimer-message {
              font-size: 20px;
            }
            #landing-slide h2 {
              margin-top: -5px;
              font-size: 40px;
              letter-spacing: -1px;
            }
          </style>
          <section class="middle">           
            <hgroup>
              <h2>
				Test Driven Development
              </h2>
             </hgroup>
			 <p>Press <span id="left-init-key" class="key">&rarr;</span> key to advance.</p>
            <img alt="Capgemini Logo"  src="resources/gfx/capgemini.jpg" class="key"/>
          </section>
          <aside class="note">
            <section>
              Welcome! (This field is for presenter notes and commentary.)
            </section>

          </aside> 
        </div>

        <div class="slide" id="title-slide">
          <style>
            #title-slide h1, #title-slide h2 {
              color: black;
            }
            #title-slide h1 {
              letter-spacing: -2px;
              font-size: 96px;
            }
            #title-slide h2 {
              margin-top: -5px;
              font-size: 40px;
              letter-spacing: -1px;
            }
          </style>
          <header>Test Driven Development</header>
          <section class="middle">
            <hgroup>
              <h2>
				What is TDD?
              </h2>
            </hgroup>
            <img alt="TDD"  src="resources/gfx/tdd.png" class="key"/>
          </section>
          <aside class="note">
            <section>
              Short development cycle: write a failing test that defines desired improvement or function, then produce code to pass that test
				Kent Beck credited for rediscovering this technique in 2003
				Related to concepts like extreme programming
				Also applied for improving legacy code
            </section>
          </aside>
        </div>


        <div class="slide" id="timeline-slide">
          <style>
            #timeline-slide h1, #timeline-slide h2 {
              color: black;
            }
            #timeline-slide h1 {
              letter-spacing: -2px;
              font-size: 96px;
            }
            #timeline-slide h2 {
              margin-top: -5px;
              font-size: 40px;
              letter-spacing: -1px;
            }
          </style>
          <header>Test Driven Development</header>
          <section class="middle">
            <hgroup>
              <h2>
				Why TDD?
              </h2>
            </hgroup>            
            <ul id="toc-list">
              <li data-auto>Small steps, leads to better design, modularity, loose coupling</li>
              <li data-auto>Developer focuses on requirement, interface BEFORE writing the code.</li>
              <li data-auto>Less need for debugging the code</li>
              <li data-auto>Test is actually written,</li>           
            </ul>
          </section>
          <aside class="note">
            <section>
              Take small steps, leads to better design, modularity, loose coupling
				Developer focusses on requirement BEFORE writing the code.
				Less need for debugging the code
				Test is actually written, 
				Developer has to think about the interface
            </section>
          </aside>
        </div>

		<div class="slide" id="how-slide">
          <style>
            #how-slide h1, #how-slide h2 {
              color: black;
            }
            #how-slide h1 {
              letter-spacing: -2px;
              font-size: 96px;
            }
            #how-slide h2 {
              margin-top: -5px;
              font-size: 40px;
              letter-spacing: -1px;
            }
          </style>
          <header>Test Driven Development</header>
          <section class="middle">
            <hgroup>
              <h2>
				How TDD?
              </h2>
            </hgroup>            
             <img alt="TDD"  src="resources/gfx/red_green_refactor.jpg" class="key"/>
          </section>
          <aside class="note">
            <section>
              Add a test
				Run all tests and see if the new one fails
				Write some code
				Run the automated tests and see them succeed
				Refactor code
				Repeat
            </section>
          </aside>
        </div>
        
        <div class="slide" id="demo-slide">
          <style>
            #demo-slide h1, #demo-slide h2 {
              color: black;
            }
            #demo-slide h1 {
              letter-spacing: -2px;
              font-size: 96px;
            }
            #demo-slide h2 {
              margin-top: -5px;
              font-size: 40px;
              letter-spacing: -1px;
            }
          </style>
          <header>Test Driven Development</header>
          <section class="middle">
            <hgroup>
              <h2>
				DEMO
              </h2>
            </hgroup>            
          </section>
          <aside class="note">
            <section>
              
            </section>
          </aside>
        </div>

      </div> <!-- slides -->
      <div id="speaker-note" class="invisible" style="display: none;">
      </div> <!-- speaker note -->
      <aside id="help" class="sidebar invisible" style="display: hidden;">
        <table>

          <caption>Help</caption>
          <tbody>
            <tr>
              <th>Move Around</th>
              <td>&larr;&nbsp;&rarr;</td>
            </tr>
            <tr>
              <th>Source File</th>

              <td>s</td>
            </tr>
            <tr>
              <th>Change Theme</th>
              <td>t</td>
            </tr>
            <tr>

              <th>Syntax Highlight</th>
              <td>h</td>
            </tr>
            <tr>
              <th>Speaker Notes</th>
              <td>n</td>
            </tr>

            <tr>
              <th>Toggle 3D</th>
              <td>3</td>
            </tr>
            <tr>
              <th>Help</th>
              <td>0</td>

            </tr>
          </tbody>
        </table>
      </aside>
    </div> <!-- presentation -->

    <!--[if lt IE 9]>
    <script 
      src="http://ajax.googleapis.com/ajax/libs/chrome-frame/1/CFInstall.min.js">
    </script>
    <script>CFInstall.check({ mode: "overlay" });</script>
    <![endif]-->

    <script src="resources/js/prettify.js" onload="prettyPrint();" defer></script>

    <script src="resources/js/script.js"></script>
    <script src="http://maps.google.com/maps/api/js?sensor=true"></script>
    <script>
      // Check if new appcache is available, load it, and reload page.
      if (window.applicationCache) {
        window.applicationCache.addEventListener('updateready', function(e) {
          if (window.applicationCache.status == window.applicationCache.UPDATEREADY) {
            window.applicationCache.swapCache();
            if (confirm('A new version of this site is available. Load it?')) {
              window.location.reload();
            }
          }
        }, false);
      }

      var _gaq = _gaq || [];
      _gaq.push(['_setAccount', 'UA-15028909-5']);
      _gaq.push(['_trackPageview']);
      _gaq.push(['_trackPageLoadTime']);

      (function() {
        var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
        ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
        var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
      })();
    </script>
  </body>
</html>